<template>
  <div class="detail-album">
    <div class="back" @click="changeRouter">fanhui</div>
    <PubVideo :id="'video1'" :config="videoConfig" />
    <div class="g-m-l-10 g-m-r-10">
      <UserCharacteristics class="g-m-t-10" :values="pageData.advertise" @success="updateData" />
      <UserTendency class="g-m-t-10" :values="tendency" @success="updateData" />
      <div class="g-m-t-10">
        <van-tag class="g-m-r-10" v-for="(item, index) in 5" :key="index" color="#7232dd" round> 标签 </van-tag>
      </div>
      <div class="g-m-t-10">
        <van-tag @click="showUgcFeedback = true" class="g-m-r-10" color="#7232dd" round> pgc面板测试 </van-tag>
        <van-tag @click="showAdvertisement = true" class="g-m-r-10" color="#7232dd" round> 广告面板测试 </van-tag>
        <van-tag @click="showPlay = true" class="g-m-r-10" color="#7232dd" round> 播放面板测试 </van-tag>
      </div>
      <Recommend class="g-m-t-10" :values="pageData.pvGags" @feedback="feedback" />
    </div>

    <!-- ugc反馈弹窗 -->
    <van-popup v-model:show="showFeedback" position="bottom">
      <div class="u-popup">
        <ContentFeedback
          :information="information"
          :contentList="contentList"
          :interestList="interestList"
          @cancelEvent="cancelEvent"
          @contentChoice="contentChoice"
          @interestChoice="interestChoice"
        />
      </div>
    </van-popup>
    <!-- pgc反馈弹窗 -->
    <van-popup v-model:show="showUgcFeedback" position="bottom">
      <div class="u-popup">
        <ContentFeedback
          :information="informationUgc"
          :contentList="contentListUgc"
          :interestList="interestListUgc"
          @cancelEvent="cancelEvent"
          @contentChoice="contentChoice"
          @interestChoice="interestChoice"
        />
      </div>
    </van-popup>
    <!-- 广告反馈弹窗 -->
    <van-popup v-model:show="showAdvertisement" position="bottom">
      <div class="u-popup">
        <ContentFeedback
          :information="advertisementTitle"
          :contentList="advertisementList"
          @cancelEvent="cancelEvent"
          @contentChoice="advertisementChoice"
        />
      </div>
    </van-popup>
    <!-- 播放内容反馈弹窗 -->
    <van-popup v-model:show="showPlay" position="bottom">
      <div class="u-popup">
        <PlaybackFeedback :contentList="playContentList" @cancelEvent="cancelEvent" @contentCommit="contentCommit" />
      </div>
    </van-popup>
  </div>
</template>

<script>
import { reactive, toRefs, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Toast } from 'vant'
import PubVideo from '@/components/pub-video/index'
import UserCharacteristics from './components/user-characteristics'
import UserTendency from './components/user-tendency'
import Recommend from './components/recommend'
import ContentFeedback from './components/contentFeedback'
import PlaybackFeedback from './components/playbackFeedback'

export default {
  name: 'DetailUp',
  components: {
    PubVideo,
    UserCharacteristics,
    UserTendency,
    Recommend,
    ContentFeedback,
    PlaybackFeedback
  },
  setup() {
    const route = useRoute()
    const state = reactive({
      videoConfig: {
        autoplay: true
      },
      videoDetailId: route.query.from || '1',
      tendency: [
        {
          isActived: false,
          count: 99
        },
        {
          isActived: false,
          count: 99
        },
        {
          isActived: false,
          count: 99
        },
        {
          isActived: false,
          count: 99
        }
      ],
      pageData: {},
      showFeedback: false,
      showUgcFeedback: false,
      showAdvertisement: false,
      showPlay: false
    })

    const getVideoDetail = () => {
      return {
        code: 200,
        data: {
          poster:
            '//d300.paixin.com/thumbs/3069483/43968111/staff_1024.jpg?imageView2/2/w/500/h/360/format/webp/interlace/1/q/90/ignore-error/1',
          link: 'http://192.168.24.36:3000/zxcu.m3u8',
          advertise: {
            poster:
              '//d300.paixin.com/thumbs/3069483/43968111/staff_1024.jpg?imageView2/2/w/500/h/360/format/webp/interlace/1/q/90/ignore-error/1',
            title: '广告标题广告标题广告标题广告标题...',
            tag: '广告标签',
            title2: '广告fu标题广告fu标题'
          },
          pvGags: {
            poster:
              '//d300.paixin.com/thumbs/3069483/43968111/staff_1024.jpg?imageView2/2/w/500/h/360/format/webp/interlace/1/q/90/ignore-error/1',
            title: 'PV&花絮',
            time: '1:99:99',
            title2: '标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题...'
          }
        }
      }
    }

    const router = useRouter()
    const changeRouter = () => router.go(0)

    const updateData = (val) => {
      switch (val.name) {
        case 'follow':
          Toast('xiexie关注')
          break
        case 'like':
          state.tendency[val.index].isActived = !state.tendency[val.index].isActived
          Toast('赞赞赞赞赞赞')
          break
        case 'star':
          state.tendency[val.index].isActived = !state.tendency[val.index].isActived
          Toast('收藏')
          break
        case 'chat':
          Toast('留言')
          break
        case 'share':
          break
      }
    }
    //反馈面板动态传入标题与提示
    let information = reactive([
      { title: '反馈', tips: '（选择后将优化此类内容）' },
      { title: '我不想看', tips: '(选择后将减少相似内容推荐)' }
    ])
    // 反馈面板上半部分数据
    let contentList = reactive([
      { id: 1, content: '标题党/封面党' },
      { id: 2, content: '封面反感' },
      { id: 3, content: '色情低俗' },
      { id: 4, content: '恐怖血腥' }
    ])
    // 反馈面板下半部分数据
    let interestList = reactive([
      { id: 1, content: 'up:ahydh' },
      { id: 1, content: '看过了' },
      { id: 2, content: '不感兴趣' }
    ])
    // 反馈面板调起
    function feedback(item) {
      console.log(1111)
      state.showFeedback = true
    }
    // 反馈面板取消
    function cancelEvent() {
      state.showFeedback = false
      state.showUgcFeedback = false
      state.showAdvertisement = false
      state.showPlay = false
    }
    //反馈面板内容反馈选中的返回信息
    function contentChoice(item) {
      state.showFeedback = false
      state.showUgcFeedback = false
      state.showAdvertisement = false
      Toast('将减少推荐类似内容')
      console.log(item)
    }
    //反馈面板我不想看选中的返回信息
    function interestChoice(item) {
      state.showFeedback = false
      state.showUgcFeedback = false
      Toast('将减少推荐类似内容')
      console.log(item)
    }
    //广告面板内容反馈选中的返回信息
    function advertisementChoice(item) {
      state.showAdvertisement = false
      Toast('将减少相似广告推荐')
      console.log(item)
    }

    function contentCommit(item) {
      state.showPlay = false
      console.log(item)
      Toast('提交成功')
    }
    //------------------------------------测试数据
    //ugc反馈面板动态传入标题与提示
    let informationUgc = reactive([
      { title: '反馈内容', tips: '（选择后将优化此类内容）' },
      { title: '我不想看', tips: '(选择后将减少相似内容推荐)' }
    ])
    // ugc反馈面板上半部分数据
    let contentListUgc = reactive([
      { id: 1, content: '标题党/封面党' },
      { id: 2, content: '封面反感' }
    ])
    // ugc反馈面板下半部分数据
    let interestListUgc = reactive([
      { id: 1, content: '看过了' },
      { id: 2, content: '不感兴趣' }
    ])

    //广告反馈面板动态传入标题与提示
    let advertisementTitle = reactive([{ title: '屏蔽广告', tips: '(选择后将优化广告展示)' }])
    // 广告反馈面板上半部分数据
    let advertisementList = reactive([
      { id: 1, content: '不感兴趣' },
      { id: 2, content: '与视频内容无光' },
      { id: 3, content: '广告质量差' },
      { id: 4, content: '虚假欺诈' }
    ])
    // 播放反馈面板上半部分数据
    let playContentList = reactive([
      { id: 1, content: '网页劫持' },
      { id: 2, content: '播放卡顿' },
      { id: 3, content: '网络正常无法播放' },
      { id: 4, content: '音画不同步' },
      { id: 5, content: '画面模糊不清楚' },
      { id: 6, content: '黑屏' },
      { id: 7, content: '网络正常无法播放' },
      { id: 8, content: '网页劫持' },
      { id: 9, content: '播放卡顿' }
    ])
    //---------------------------------------------
    onMounted(async () => {
      const { data } = await getVideoDetail()
      if (!data) {
        state.pageData = {}
        return
      }
      state.pageData = { ...data }
      state.videoConfig.video = data.link
      state.videoConfig.poster = data.poster
    })

    return {
      contentList,
      interestList,
      information,
      contentListUgc,
      interestListUgc,
      informationUgc,
      advertisementTitle,
      advertisementList,
      playContentList,
      ...toRefs(state),
      changeRouter,
      updateData,
      feedback,
      cancelEvent,
      contentChoice,
      interestChoice,
      advertisementChoice,
      contentCommit
    }
  }
}
</script>

<style lang="scss" scoped>
.u-popup {
  background: #121212;
}
.detail-album {
  background: gray;
  color: #fff;
}
.back {
  position: absolute;
  top: 20px;
  left: 20px;
  color: red;
  font-size: 20px;
  z-index: 9;
}
.g-flex {
  display: flex;
}
.g-jc-sb {
  justify-content: space-between;
}
.g-jc-sa {
  justify-content: space-around;
}
.g-m-l-10 {
  margin-left: 10px;
}
.g-m-r-10 {
  margin-right: 10px;
}
.g-m-r-20 {
  margin-right: 20px;
}
.g-m-t-10 {
  margin-top: 10px;
}
.g-m-l-a {
  margin-left: auto;
}
.g-f-r {
  float: right;
}
.g-w {
  width: 100%;
}
.g-o-x-s {
  overflow-x: scroll;
}
.g-s-h::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
.g-relative {
  position: relative;
}
.g-absolute {
  position: absolute;
  top: 60px;
}
.up-advert-img {
  width: 54px;
  height: 34px;
  border-radius: 2px;
}
.up-head-img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
}
.up-name {
  height: 20px;
  font-size: 14px;
}
.up-btn {
  height: 28px;
}
.up-crad-img {
  width: 140px;
  height: 80px;
  border-radius: 2px;
}
.bug-video {
  width: 96%;
  height: 30px;
  line-height: 30px;
  border: 1px solid red;
  border-radius: 15px;
  vertical-align: middle;
  background: palevioletred;
}
.list-img {
  width: 150px;
  height: 60px;
  border-radius: 4px;
}
</style>
